<script setup lang="ts">
import { ref } from "vue";
import { showLoadingToast, showFailToast, closeToast } from "vant";
import { useUserStore } from "@/store/useUserStore";
const loading = ref(false);

const userStore = useUserStore();
const handleLogin = async () => {
  try {
    loading.value = true;
    showLoadingToast({
      message: "登录中...",
      forbidClick: true,
      duration: 0
    });
    userStore.wechatLogin();
  } catch (error) {
    showFailToast("登录失败，请重试");
    console.error("Login failed:", error);
  } finally {
    loading.value = false;
    closeToast(); // 确保加载提示被关闭
  }
};
</script>

<template>
  <div
    class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900"
  >
    <div class="w-4/5 max-w-sm text-center">
      <h1 class="text-2xl font-bold mb-8 text-gray-900 dark:text-white">
        微信登录
      </h1>

      <van-button
        type="primary"
        block
        round
        :loading="loading"
        @click="handleLogin"
        class="dark:bg-green-700 dark:text-white"
      >
        {{ loading ? "登录中..." : "微信登录" }}
      </van-button>
    </div>
  </div>
</template>

<style scoped>
/* 自定义样式以支持夜间模式 */
.dark .van-button {
  background-color: #2563eb !important; /* 深色模式按钮背景色 */
  color: #ffffff !important; /* 深色模式按钮文字颜色 */
}
</style>
